<template>
	<view class="mall-menu">
		<view class="menu">
			<button @contact="handleContact" :open-type="item.url" class="item" @click.native="turn(item.url)" v-for="(item,index) in menus" :key=index>
				<image class="img" :src="item.img"></image>
				<text class="name">{{item.name}}</text>
			</button>
		</view>
	<!-- 	<view class="msg">
			<view class="left">
				<text class="iconfont icontoutiao"></text>
				<text class="name">头条</text>
			</view>
			<view class="right">
				<text class="txt">{{msg}}</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		methods:{
			handleContact(e){
			},
			turn(url){
				if(url=='my'){
					this.$Router.pushTab("/pages/my/my")
				}else if(url != 'contact'){
					uni.navigateTo({
						url:"../../pages/web/web?url="+encodeURIComponent(url)
					})
				}
				
			}
		},
		props:{
			menus:Array
		},
		data() {
			return {
				msg:'水果店为啥把西瓜切开卖，原来原因是水果店为啥把西瓜切开卖原来原因是水果店为啥把西瓜切开卖'
			};
		}
	}
</script>

<style lang="stylus">
	.mall-menu
		background-color white
		margin-top 20rpx
		padding 0 8rpx
		border-radius 10rpx
		.menu
			padding-top 27rpx
			display flex
			flex-wrap wrap
			align-items center
			.item
				margin-bottom 19rpx
				display flex
				align-items center
				flex-direction column
				justify-content center
				width 146rpx
				height 100%
				border none
				outline none
				margin 0 
				padding 0
				border-radius 0
				border none
				background-color white
				&::after
					border-radius 0
					border none
				.img
					width 83rpx
					height 83rpx
					border-radius 50%
				.name	
					margin-top 10rpx
					font-size 24rpx
					color:rgba(111,111,111,1);
		.msg
			padding 0 12rpx
			height 72rpx
			display flex
			align-items center
			.left
				flex 0 0 140rpx
				border-top 1rpx solid rgba(220,220,220,1)
				display flex
				align-items center
				justify-content center
				height 100%
				.icontoutiao
					color #F0C808
					margin-right 10rpx
				.name
					font-size 28rpx
					color rgba(240,200,8,1);
			.right
				display flex
				align-items center
				height 100%
				border-top 1rpx solid rgba(220,220,220,1)
				overflow hidden
				.txt
					padding 0 25rpx
					border-left 1rpx solid #A1A1A1
					height 41rpx
					line-height 41rpx
					font-size 22rpx
					color #A1A1A1
					text-overflow ellipsis
					overflow hidden
					white-space nowrap
				
</style>
